$completeColor: #cecbcb;
$baseColor: #167CF3;
$fontColor: #8c8484;
$todoColor: #f80606;
$pathColor: #605e5e;
$user-task: './assets/userTask.png';
$service-task: './assets/serviceTask.png';
$start-event: './assets/start.png';
$end-event: './assets/end.png';
$parallel-gateway: './assets/parallelGateway.png';
$exclusive-gateway: './assets/exclusiveGateway.png';
$inclusive-gateway: './assets/inclusiveGateway.png';
$delete: './assets/delete.png';
$hand-tool: './assets/hand.png';
$lasso-tool: './assets/lasso.png';
$space-tool: './assets/space.png';
$connection-tool: './assets/connection.png';
$group: './assets/group.png';
$subprocess: './assets/subprocess.png';

/** 基础样式 - 开始 **/
.bpmn-containers {
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  .bpmn-link {
    padding-right: 5px;
    font-size: 13px;
  }
}
.view-mode {
  .el-header, .el-aside, .djs-palette, .bjs-powered-by {
    display: none;
  }
  .el-loading-mask {
    background-color: initial;
  }
  .el-loading-spinner {
    display: none;
  }
}

.el-main {
  padding: 0;
  outline: 1px solid #e4e7ed;
}
.el-aside{
  padding: 0;
  outline: 1px solid #e4e7ed;
}

.bpmn-main {
  position: relative;
  width: 100%;
  height: 100%;
  background: url() repeat!important;
}

.bpmn-hint {
  position: absolute;
  top: 10px;
  right: 20px;
  color: $fontColor;
  font-size: 14px;
  @each $index, $color in (1, $completeColor), (2, $todoColor), (3, $baseColor){
    :nth-child(#{$index}).border {
      display: inline-block;
      position: relative;
      border: 1px solid $color;
      width: 10px;
      height: 10px;
      opacity: 0.5;
      border-radius: 3px;
      &:after {
        box-sizing: border-box;
        content: "";
        position: absolute;
        width: 12px;
        height: 11px;
        background: $color;
        opacity: 0.3;
        top: -1px;
        left: -1px;
      }
    }
  }
  span {
    padding-right: 5px;
  }
}
.canvas{
  width: 100%;
  height: 100%;
}

.bpmn-dialog {
  z-index: 1000;
  transform: translate(25px, 42px);
  path {
    stroke: #ccc;
    fill: #fff;
    opacity: 0;
    -webkit-animation: dialog 0.5s ease;
    animation-fill-mode: forwards;
  }
  //stroke: #8c8484;
  //stroke-width: 2px;
  //fill: white;
  //fill-opacity: 0.95;
  //opacity: 0;
  //-webkit-animation: dialog 1s ease 0.2s;
  //animation-fill-mode: forwards;
}

/** 去掉logo **/
.bjs-powered-by {
  display: none;
}
/** 基础样式 - 结束 **/

/** 左侧工具栏样式 - 开始 **/
@mixin font {
  font-size: 14px;
  position: absolute;
  top: 0;
  left: 40px;
  white-space: nowrap;
  color: $fontColor;
  width: 35px;
  height: 35px;
  line-height: 35px;
}

.icon-custom {
  border-radius: 50%;
  background-size: 65%;
  background-repeat: no-repeat;
  background-position: center;
  @each $name,$url,$content in
                  (user-task, './assets/userTask.png', '\7528\6237\4efb\52a1'),
                  (service-task, $service-task, '\670d\52a1\4efb\52a1'),
                  (start-event, $start-event, '\5f00\59cb\4e8b\4ef6'),
                  (end-event, $end-event, '\7ed3\675f\4e8b\4ef6'),
                  (parallel-gateway, $parallel-gateway, '\5e76\884c\7f51\5173'),
                  (exclusive-gateway, $exclusive-gateway, '\6392\4ed6\7f51\5173'),
                  (inclusive-gateway, $inclusive-gateway, '\5305\5bb9\7f51\5173'),
                  (hand-tool, $hand-tool, '\624b\52a8\5de5\5177'),
                  (lasso-tool, $lasso-tool, '\5957\7d22\5de5\5177'),
                  (space-tool, $space-tool, '\7a7a\95f4\5de5\5177'),
                  (connection-tool, $connection-tool, '\8fde\63a5\5de5\5177'),
                  (group, $group, '\521b\5efa\7ec4'),
                  (subprocess, $subprocess, '\521b\5efa\5b50\6d41\7a0b')
  {
    &.#{$name} {
      background-image: url($url);
      &::after {
        content: $content;
        @include font
      }
    }
  }
  &.delete {
    background-image: url($delete);
  }
}

.djs-context-pad {
  .entry {
    box-sizing: border-box;
    background-size: 100%;
    transition: all 0.3s;
  }
  .entry:hover {
    border: 1px solid $baseColor;
  }
  @each $name, $url in
                  (user-task, './assets/userTask.png'),
                  (end-event, $end-event),
                  (parallel-gateway, $parallel-gateway),
                  (exclusive-gateway, $exclusive-gateway),
                  (inclusive-gateway, $inclusive-gateway),
                  (connection-tool, $connection-tool),
                  (delete, $delete) {
    .#{$name}.entry {
      background-image: url($url);
    }
    .#{$name}.entry:hover {
      background: url($url) center no-repeat !important;
      background-size: cover !important;
    }
  }
}

.djs-palette {
  width: 150px!important;
  overflow: auto;
  box-shadow: 4px 4px 10px #CCCCCC;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.8);
  .entry {
    float: none!important;
    position: relative;
    cursor: pointer!important;
    width: 35px!important;
    height: 35px!important;
  }
  .entry:before {
    color: $baseColor!important;
  }
}
/** 左侧工具栏样式 - 结束 **/

/** 流程图样式 - 开始 **/
// 默认样式
.djs-shape .djs-visual > rect {
  fill: $baseColor !important;
  stroke: $baseColor !important;
  fill-opacity: 0.2 !important;
}

.djs-shape .djs-visual > text {
  fill: $baseColor !important;
}
.djs-shape .djs-visual > path {
  fill: $baseColor !important;
  fill-opacity: 0.2 !important;
  stroke: $baseColor !important;
}
// 连线样式
.djs-connection > .djs-visual > path {
  stroke: $pathColor !important;
}
marker > path {
  stroke: $pathColor !important;
  fill: $pathColor !important;
}
// 当前节点样式
.jin-bpmn {
  &-todo {
    &.djs-shape .djs-visual > text {
      fill: $todoColor !important;
    }
    &.djs-shape .djs-visual > path {
      fill: $todoColor !important;
      fill-opacity: 0.2 !important;
      stroke: $todoColor !important;
    }
    &.djs-shape .djs-visual > rect {
      fill: $todoColor !important;
      stroke: $todoColor !important;
      stroke-dasharray: 4px !important;
      opacity: 0.5;
      -webkit-animation: roll 30s linear 0s infinite;
      -webkit-animation-fill-mode: forwards;
    }
  }
  &-complete {
    &.djs-shape .djs-visual > text {
      fill: $fontColor !important;
    }
    &.djs-shape .djs-visual > path {
      fill: $completeColor !important;
      fill-opacity: 0.2 !important;
      stroke: $completeColor !important;
    }
    &.djs-shape .djs-visual > rect {
      fill: $completeColor !important;
      stroke: $completeColor !important;
      fill-opacity: 0.2 !important;
    }
  }
}
/** 流程图样式 - 结束 **/

// 动画
@-webkit-keyframes roll {
  to {
    stroke-dashoffset: 100%;
  }
}

@-webkit-keyframes dialog {
  100% {
    opacity: 1;
  }
}